import { observer } from 'mobx-react-lite'
import { useRootStore } from '../stores/rootStore'
function  Item(props) {
  const { todoListStore } =useRootStore()
  
   return (
    <div className="appleItem" style={{display:(!props.child.eat)?'block':'none'}}>
      {props.child.eat}
    <div className="apple">
      <img alt="" />
    </div>
      <div className="info">
        <div className="name">红苹果 -{props.index}号</div>
        <div className="weight">{props.child.gram}克</div>
      </div>
      <div className="btn-div">
        <button onClick={() =>{todoListStore.eat(props.index)}} > 吃掉 </button>
      </div>
    </div>
   )
}
export default observer(Item)